import React from "react";
import HeaderLayout from "../../Layout/HeaderLayout";
import SVGInfoImageBox from '../../Component/SVGInfoImageBox';
import "./index.css";
import AOPA from "../../Component/AOPA";
import FlyCourseSmall from "../../Component/FlyCourseSmall";
import "../../Common/css/common.css";
import PaiStudyServer from "../../Server/PaiStudy/PaiStudyServer";
import HttpUtil from "../../utils/HttpUtil";
import AerialPhotogr from "./AerialPhotography";

export default class  extends React.Component{
    
    constructor(props){
        super();
        let key=props.match.params.key;
        document.documentElement.style.background="#f9fcff";
        this.state={
            Treasure:true,//应试宝典
            Course:false,//课件
            ItemBank:false,//题库
            Exam:false,//模拟考试

            resultTab:[],//tab
            selectTabKey:key,

            studyData:null,
        }
        
        this.GetData();
    }
    GetData(){
        PaiStudyServer.PaiStudyColumnSelectColumnList()
        .then(response=>{
            this.setState({
                studyData:response.data
            },()=>{
                this.RenderTab();
            })
            
            // console.log(response);
        },reject=>{
            // console.log(reject);
        });
    }
    RenderTab(){
        if(this.state.studyData===null){
            return;
        }
        let resultTab=[];
        let isFirst=true;
        this.state.studyData.forEach(element => {
            let key=element.id;
            //设置首页选中,或根据选择的tab选中
            let showTab=false;
            let selectTabKey=this.state.selectTabKey;
            if((selectTabKey===undefined&&isFirst)||(selectTabKey!==undefined && selectTabKey===key)){
                showTab=true;
                document.title=element.columnName;
                this.setState({
                    selectTabKey:key
                });
            }
            resultTab.push(
                <div key={key} className="Study_SVGBox Pointer" onClick={e=>this.SelectTab(key)}>
                    <SVGInfoImageBox isActive={showTab} title={element.columnName} msg={element.curriculumName} img={HttpUtil.GetResourceURL(element.columnImg)}/>
                    {/* <SVGInfoBox isActive={this.state.Exam} title={element.columnName} msg={element.curriculumName} img={imgs[index++]}/> */}
                </div>
            );
            isFirst=false;
        });
       
        this.setState({
            resultTab
        })
    }
    ClearSelect(){
        this.setState({
            Treasure:false,
            Course:false,
            ItemBank:false,
            Exam:false,
        });
    }
    componentDidMount(){
        this.RenderFrame();
    }
    SelectTab(key){
        this.setState({
            selectTabKey:key
        },()=>{
            // console.log(this.state.selectTabKey)
            this.RenderTab();
            this.RenderFrame();
        });
    }
    RenderFrame(){
        // let key=this.state.selectTabKey;
    }

    render(){
        return(
            <div className="Study_Body">
                <HeaderLayout notHome="true" activeID={3}/>
                <div className="Study_Container">
                    <div className="Study_Left">
                        <div>
                            <a href="/study">
                                <AOPA/>
                            </a>
                        </div>
                        <div style={{marginTop:"0.5rem"}}>
                            <a href="/flyCourse">
                                <FlyCourseSmall width="169px" heidht="165px"/>
                            </a>
                        </div>
                    </div>
                    <div className="Study_Right" >
                        <div className="Study_Right_Title">
                            {this.state.resultTab}
                        </div>
                        <div className="Study_Right_Body">
                            <AerialPhotogr type={this.state.selectTabKey}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
